<template>
	<view class="wrap">
		<view class="address u-flex u-row-between u-p-t-30 u-p-b-30" @click="toChangeAddress">
			 
			<view class="icon">
				<u-icon name="map-fill" color="white" size="50"></u-icon>	
			</view>
			<view>
				<view class="addressInfo">
					{{addressInfo.address!='' ? addressInfo.address : '请选择地址'}}
				</view>
				<view class="userInfo">
					{{addressInfo.name!='' ? addressInfo.name : ''}} {{addressInfo.phone!='' ? addressInfo.phone : ''}}
				</view>
			</view>
			<view class="u-m-20">
				<u-icon name="arrow-right" color="#c6c6c6" size="30"></u-icon>	
			</view>
		</view>
		<view class="prices u-p-t-10 u-p-b-30">
			<view class="u-m-20 ">
				<view style="font-size: 32rpx;font-weight: 700;">价格明细</view>
			</view>
			<view class="u-m-l-20 u-m-r-20  u-flex u-row-between">
				<view>商品总价 <text class="u-p-l-10" style="font-size: 25rpx;color: #82848A;">共{{goodsIdListCount}}件宝贝</text></view>
				<view>
					<text style="font-size: 25rpx;font-weight: bolder;">￥</text>
					<text style="font-size: 35rpx;font-weight: bolder;">{{totalPrice | rounding}}</text>
				</view>
			</view>
			
		</view>
		<view class="goods u-p-t-10 u-p-b-30">
			<view class="u-m-20 ">
				<view style="font-size: 32rpx;font-weight: 700;">咚咚图书出版社</view>
			</view>
			<view v-if="directBid!=0" class="u-m-l-20 u-m-r-20 u-m-b-10 u-flex" style="line-height: 50rpx;">
				<view class="u-p-r-20 u-flex-4" >
					<u-image width="200rpx" height="200rpx" :src="vuex_user.store + directInfo.img"></u-image>
				</view>
				<view class="u-flex-8" style="width: 400rpx;">
					<view class="u-line-2">{{directInfo.name}}</view>
					<view class="u-line-2" style="color: #82848A;">{{directInfo.author}}</view>
					<u-tag text="书籍商品无法退货" mode="light" type="warning"/>
				</view>
				<view class="u-p-l-10 u-flex-2" style="text-align: right;">
					<view >￥{{directInfo.price | rounding}}</view>
					<view style="color: #82848A; font-size: 20rpx;" >×{{directCount}}</view>
				</view>
			</view>
			<view v-else class="u-m-l-20 u-m-r-20 u-m-b-10 u-flex" style="line-height: 50rpx;" v-for="item in bookList">
				<view class="u-p-r-20 u-flex-4" >
					<u-image width="200rpx" height="200rpx" :src="vuex_user.store + item.book.img"></u-image>
				</view>
				<view class="u-flex-8" style="width: 400rpx;">
					<view class="u-line-2">{{item.book.name}}</view>
					<view class="u-line-2" style="color: #82848A;">{{item.book.author}}</view>
					<!-- <u-tag text="书籍商品无法退货" mode="light" type="warning"/> -->
				</view>
				<view class="u-p-l-10 u-flex-2" style="text-align: right;">
					<view >￥{{item.book.price | rounding}}</view>
					<view style="color: #82848A; font-size: 20rpx;" >×{{item.count}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="extend u-p-t-10 u-p-b-20">
			<view class="u-m-20 ">
				<u-section @click="expressageClick" :show-line="false" title="配送服务" sub-title="快递 包邮"></u-section>
			</view>
			<view class="u-m-20" >
				<u-section  @click="remarkClick" :show-line="false" title="订单备注" :sub-title="subTitle"></u-section>
				<u-popup v-model="popupShow" mode="bottom" border-radius="20" length="70%" :closeable="true" style="text-align: center;">
					<view class="u-m-t-20" style="font-size: 35rpx;font-weight: bolder;">订单备注</view>
					<view style="margin: 50rpx auto ; text-align: lef;">
						<textarea v-model="userRemark" type="text" placeholder-class="line" placeholder="填写备注,建议先和商家协商一致"  style="background-color: #e8e9eb;margin: 50rpx auto ;"/>
					</view>
					<view class="u-m-l-20 u-m-r-20 ">
						<u-button @click="userRemarkClick" type="warning" shape="circle">确定</u-button>
					</view>
					
				</u-popup>
			</view>
		</view>
		
		<view class="bottomFixed u-flex u-p-15">
			<view class="u-flex-5">
				
			</view>
			<view class="u-flex u-flex-7 u-row-around">
				<view style="text-align: right;">
					<view class="title">
						合计:
					<text class="price">￥{{totalPrice | rounding}}</text>
					</view>
					
				</view>
				<u-button @click="toOrderDetail" type="warning" :ripple="true" shape="circle" class="u-m-l-20" >去结算</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc:'../../static/img/center.png',
				remark:'',
				popupShow:false,
				userRemark:'',
				addressInfo:{
					address:'',
					name:'',
					phone:''
				},
				goodsIdList:{},
				goodsIdListCount:0,
				bookList:[],
				totalPrice:0,
				selectAddress:{},
				directBid:0,
				directCount:0,
				directInfo:{
					price:0
				},
				subTitle:'填写备注',
				siteList:[]
			}
		},
		onShow() {
			this.getAddressList()
			console.log(this.siteList)
			if(this.siteList.length == 0){
				
				this.addressInfo = {
					address:'',
					name:'',
					phone:''
				}
				console.log(this.addressInfo)
			}
			if(JSON.stringify(this.selectAddress)!="{}"){
				this.addressInfo = this.selectAddress
			}
			
		},
		onLoad(val){
			console.log(val)
			if(val.bid){
				this.directBid = val.bid
				this.directCount = val.count
				this.goodsIdListCount = val.count
				
				
				this.getDefaultAddress()
				this.getBookInfo()
			}else{
				//#ifdef H5
				this.goodsIdList = val['arr[]'].split(',')
				
				//#endif
				//#ifndef H5
				this.goodsIdList = val['arr'].split(',')
				
				//#endif
				this.goodsIdListCount = this.goodsIdList.length
				this.getDefaultAddress()
				this.getOrder()
			}
			
		},
		methods: {
			async getAddressList(){
				const res = await this.$u.api.getAddressList(this.vuex_user.id)
				
				this.siteList = res
				console.log(res)
			},
			async getBookInfo(){
				const res = await this.$u.api.booksInfo(this.directBid)
				this.directInfo = res.book
				this.totalPrice = this.directCount * res.book.price
			},
			
			async toOrderDetail(){
				if(this.directBid==0){
					// 创建订单并跳转
					const params = {
						aid:this.addressInfo.id,
						ids:this.goodsIdList,
						note:this.userRemark
					}
					
					const res = await this.$u.api.createOrder(params)
					if(res!=null){
						this.$u.toast("订单创建成功")
						setTimeout(()=>{
							this.$u.route({
								type:'redirect',
								url:'pages/order/orderDetail',
								params:{
									oid:res['oid']
								}
							})
						},1500)
					}
				}else{
					// 直接购买
					const params = {
						aid:this.addressInfo.id,
						bid:this.directBid*1.0,
						count:this.directCount*1.0,
						note:this.userRemark,
						
					}
					
					const res = await this.$u.api.directCreateOrder(params)
					
					if(res!=null){
						this.$u.toast("订单创建成功")
						setTimeout(()=>{
							this.$u.route({
								type:'redirect',
								url:'pages/order/orderDetail',
								params:{
									oid:res['oid']
								}
							})
						},1500)
					}
				}
				
				
				
			},
			async getOrder(){
				const params = {
					ids:this.goodsIdList
				}
				const res = await this.$u.api.cartToOrder(params)
				this.bookList = res
				for (var i = 0; i < this.bookList.length; i++) {
					this.totalPrice += this.bookList[i].count * this.bookList[i].book.price
				}
			},
			async getDefaultAddress(){
				const res = await this.$u.api.getDefaultAddress(this.vuex_user.id)
				if(res!=null){
					this.addressInfo = res
					this.addressInfo.address = this.$u.trim(res.address,'all')
				}
				
				
			},
			userRemarkClick(){
				this.popupShow = false
				if(this.userRemark.length >= 17){
					this.subTitle = this.userRemark.slice(0,17) + "..."
				}else if(this.userRemark.length == 0){
					this.subTitle = '填写备注'
				}else{
					this.subTitle = this.userRemark
				}
				
			},
			expressageClick(){
				this.$u.toast("目前只能选这个哟")
			},
			remarkClick(){
				this.popupShow = true
			},
			toChangeAddress(){
				this.$u.route({
					url:'/pages/address/index',
					params:{
						select:true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		background-color: #f3f4f6;
		padding-bottom: 200rpx;
		.address{
			
			width: 700rpx;
			margin: 25rpx;
			border-radius: 10rpx;
			background-color: #fff;
			.addressInfo{
				font-weight: bolder;
				font-size: 32rpx;
			}
			.userInfo{
				margin-top: 20rpx;
				color: #909399;
			}
		}
		.icon{
			width: 50rpx;
			height: 50rpx;
			background-color: #FA3534;
			border-radius: 50%;
			margin: auto 20rpx;
		}
	}
	.extend{
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.goods{
		
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.prices{
		
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	
	.bottomFixed {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #fff;
	}
	
		/*#ifdef H5*/
		.bottomFixed {
			bottom: 0rpx;
		}

		/*#endif*/
		/*#ifdef APP*/
		.bottomFixed {
			bottom: 0rpx;
		}
		
		/*#endif*/
		/*#ifdef MP-WEIXIN*/
		.bottomFixed {
			bottom: 0;
			// z-index: 99999;
		}
		/*#endif*/
	.price{
		font-size: 50rpx;
		color: #fa6418;
		font-weight: 800;
	}
	.title{
		font-size: 26rpx;
	}
</style>
